<template>
    <div class="content">
        <div class="row">
            <div class="col-md-3">
                <!-- <orderDept v-model="distributeData.distributeDept" />-->
                <div class="form-group">
                    <label class="col-sm-4 control-label">
                        <i class="colorRed">*</i> 责任部门：</label>
                    <div class="col-sm-8">
                        <select class="form-control select2" style="width: 100%;color:#555" v-model="distributeData.distributeDept">
                            <option value="" disabled selected style='display:none;'>请选择</option>

                            <option v-for="(lst,index) in deptList" :value="lst.deptId" :id="lst.deptId" :key="index">{{lst.name}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class=" col-md-3">
                <span class="error" :style="{visibility: (valid.distributeDept && distributeData.distributeDept == '') ? 'visible' : 'hidden'}">
                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择责任部门</span>
            </div>
            <div class="col-md-1" style="padding:0;font-weight:700">
                当前环节：
            </div>
            <div class="col-md-5">
                派单
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <!-- <orderPerson :DeptId="distributeData.distributeDept" v-model="distributeData.peopleId" /> -->
                <div class="form-group">
                    <label class="col-sm-4 control-label">
                        <i class="colorRed">*</i> 选择确认人：</label>
                    <div class="col-sm-8">
                        <select class="form-control select2" style="width: 100%;color:#555" v-model="distributeData.peopleId">
                            <option value="" disabled selected style='display:none;'>请选择</option>
                            <option v-for="lst in personList" :value="lst.userId" :key="lst.userId">{{lst.username}}</option>
                        </select>
                        <!-- <v-select :placeholder="placeholder" multiple :options="options" label="name" :value.sync="students"></v-select>
                        <div id="value">{{students}}</div> -->
                        <!-- <el-select v-model="distributeData.peopleId" multiple placeholder="请选择">
                            <el-option v-for="item in personList" :key="item.value" :label="item.username" :value="item.userId">
                            </el-option>
                        </el-select> -->
                    </div>
                </div>
            </div>
            <div class=" col-md-3">
                <span class="error" :style="{visibility: (valid.peopleId && distributeData.peopleId == '') ? 'visible' : 'hidden'}">
                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择处理人</span>
            </div>
            <div class="col-md-1" style="padding:0;font-weight:700">
                时间：
            </div>
            <div class="col-md-5">
                {{getDate()}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-1" style="padding:0;font-weight:700">
                描述：
            </div>
            <div class="col-md-9">
                <textarea class="form-control" rows="3" placeholder="Enter ..." v-model='distributeData.distributeDesc' maxlength="80"></textarea>
            </div>
        </div>
        <div class="row" style="margin-top:100px">
            <div class="col-md-1 col-md-offset-4">
                <button type="button" class="btn btn-block btn-primary" @click="getEventDistribute">提交</button>
            </div>

        </div>
    </div>
</template>

<script>
import orderDept from "@/components/common/orderDept.vue";
import orderPerson from "@/components/common/orderPerson.vue";
import utils from "@/utils";

export default {
    props: ["formList", "isActive"],
    data() {
        return {
            distributeData: {
                orderId: "",
                distributeDept: this.formList.deptId,
                distributePerson: "",
                distributeDesc: "",
                peopleId: '',
            },
            valid: {
                distributeDept: false,
                peopleId: false
            },
            personList: [],
            deptList: [],
            // options: [
            //     { "student_id": 1, "name": "Vence" },
            //     { "student_id": 2, "name": "Job" },
            //     { "student_id": 3, "name": "Jack" },
            // ],
            // placeholder: 'Choose a student..',
            // students: []
        };
    },
    components: {
        orderDept,
        orderPerson
    },
    watch: {
        'distributeData.distributeDept'() {
            // console.log(this.DeptId);
            this.getSelDutyPerson();
        }
    },
    mounted() {
        this.getSelOrderDept(() => {
            this.getSelDutyPerson()
        })

    },
    methods: {
        getEventDistribute() {
            if (this.distributeData.distributeDept == "") {
                this.valid.distributeDept = true;
            } else if (this.distributeData.peopleId == "") {
                this.valid.peopleId = true;
            } else {
                this.distributeData.orderId = this.formList.orderId;

                console.log(this.distributeData);
                this.$api.ticket.list
                    .eventDistribute(this.distributeData)
                    .then(res => {
                        if (res.success) {
                            // console.log(res);
                            this.formList.orderStatus = res.data;
                            this.$$message({
                                message: "恭喜您，派发成功！",
                                type: "success"
                            });
                            this.$parent.$refs.detailmsgComp.getEventWorkinfo();
                            this.$parent.$refs.detailmsgComp.$parent.getSelEventId();
                            this.$emit("isActive");
                        }
                        else{
                            this.$$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    });
            }
        },
        getDate() {
            return utils.getDate();
        },
        getSelDutyPerson() {
            this.$api.ticket.list.selDutyPerson({
                deptId: this.distributeData.distributeDept
            }).then(res => {
                if (res.success) {
                    this.personList = res.data
                    // console.log(res);
                }
            });
        },
        getSelOrderDept(callback) {
            this.$api.ticket.list.selOrderDept().then(res => {
                if (res.success) {
                    this.deptList = res.data
                    // console.log(res.data);
                    callback()
                }
            });
        },
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content {
  .row {
    margin: 17px 0;
  }
  .col-md-1 {
    text-align: right;
    height: 32px;
    line-height: 32px;
  }
  .col-md-5 {
    height: 32px;
    line-height: 32px;
    color: #b2afb3;
  }
  select {
    width: 200px;
    height: 32px;
    line-height: 32px;
    padding-top: 4px;
    color: #b2afb3;
    border-radius: 5px;
  }
  label {
    text-align: right;
  }
}
.control-label {
  padding: 0;
  line-height: 34px;
  text-align: right;
}
</style>
